<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-repair-container`]">
      <uv-sticky bgColor="#fff" :offsetTop="$Platform.device.uniPlatform === 'web' ? 0 : $Platform.navbar">
        <uv-tabs :list="list" :scrollable="false" :current="current" :lineColor="theme" @change="handleChangeTabs" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" />
      </uv-sticky>
      <view class="card" v-for="(item, index) in pagesConfig.repairList" :key="index" @click="handleRepairDetail(item)">
        <view class="top">
          <view class="date">{{ item.created }}</view>
          <view class="tag" :style="{ background: stepStateEnum[item.status] }">{{ item.status }}</view>
        </view>
        <view class="bottom">
          <view class="left">
            <image :src="item.cover" />
          </view>
          <view class="right">
            <view>{{ item.project_room }}</view>
            <view>{{ item.item }}</view>
            <view>{{ item.detail }}</view>
          </view>
        </view>
      </view>
      <uv-load-more :status="pagesConfig.status" />
      <!-- popup 弹窗 -->
      <view class="popup" v-if="isPopup" @click="handleSwitch()">
        <view class="popup-container" @click.stop="stop">
          <view class="popup-title">请选择房间</view>
          <template v-if="roomData.length == 0">
            <view class="no-data">暂无数据</view>
          </template>
          <template v-else>
            <view class="popup-wrap" @click.stop="stop">
              <view class="popup-item" v-for="(item, index) in roomData" :key="index" @click="handleSelectCategory(item)">
                {{ item.name }}
              </view>
            </view>
          </template>
        </view>
      </view>
      <!-- 新增报修按钮 -->
      <view v-show="current === 0" class="add-repair" @click="handleAddRepair()">新增报修</view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getListData, getProjectRooms } from './api'

export default {
  name: 'repair',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      current: 0,
      list: [{ name: '未处理' }, { name: '已处理' }],
      activeStyle: { color: this.theme, fontSize: '12px' },
      inactiveStyle: { fontSize: '12px' },
      roomData: [],
      stepStateEnum: {
        待受理: '#f9d34a',
        已受理: '#ed7d4f',
        处理中: '#5cabf8',
        已完成: '#77e5a7',
        已评价: '#77e5a7',
        已拒绝: '#989898',
        不受理: '#989898',
      },
      pagesConfig: {
        repairList: [],
        // 报修列表分页数据
        current: 1,
        size: 10,
        total: 0,
        status: 'loadmore',
      },
      isPopup: false,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    this.getData()
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.getData()
  },
  // 加载更多
  onReachBottom() {
    this.pagesConfig.current++
    this.getData()
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    handleChangeTabs(item) {
      this.current = item.index
      this.getData()
    },

    async getData() {
      const { current, size, total } = this.pagesConfig

      const query = {
        p: current,
        ps: size,
        state: this.current + 1,
      }
      const { data } = await getListData(query)
      if (current === 1) {
        this.pagesConfig.repairList = data
        if (data?.length == 0) {
          this.pagesConfig.status = 'no-more'
        }
      } else {
        if (data.length == 0) {
          this.pagesConfig.status = 'no-more'
        }
        this.pagesConfig.repairList = this.pagesConfig.repairList.concat(data)
      }

      uni.stopPullDownRefresh()
      //   let res = await repair.getListData(data).catch((err) => {
      //     if (err.response.status == 100002) {
      //       PageService.navigateTo('login', {
      //         url: 'myRepair',
      //       })
      //     }
      //   })
      //   uni.stopPullDownRefresh()
      //   if (this.pageData.current === 1) {
      //     this.repairList = res
      //     if (res?.length == 0) {
      //       this.status = 'no-more'
      //     }
      //   } else {
      //     if (res.length == 0) {
      //       this.status = 'no-more'
      //     }
      //     this.repairList = this.repairList.concat(res)
      //   }
    },
    // 新增报修
    async handleAddRepair() {
      const { data } = await getProjectRooms({})
      this.isPopup = true
      this.roomData = data
    },
    // 阻止冒泡
    stop() {},
    // 房间列表弹窗组件
    handleSwitch() {
      this.isPopup = !this.isPopup
    },
    handleRepairDetail({ id }) {
      this.$ROUTE.go('/pages/subpackage/repair/detail', { id })
    },
    handleSelectCategory(item) {
      this.$ROUTE.go('/pages/subpackage/repair/repair-process', {
        room_name: item.name,
        project_id: item.project_id,
        room_id: item.room_id,
      })
      //   let urlParams = JSON.stringify({
      //     room_name: item.name,
      //     project_id: item.project_id,
      //     room_id: item.room_id
      //   })
      //   uni.navigateTo({
      //     url: `/pages-repair-report/category/index?urlParams=${urlParams}`
      //   })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('repair-container')} {
  background: #f8f8f8;
  .tasb-item {
    width: 50%;
    text-align: center;
  }
  ::v-deep .uv-tabs__wrapper__nav__item {
    width: 50%;
    box-sizing: border-box;
  }
  .card {
    padding: 30rpx;
    margin: 20rpx;
    background: white;

    .top {
      border-bottom: 2rpx solid #f1f1f1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;
      font-size: 24rpx;

      .date {
      }
      .tag {
        padding: 8rpx 15rpx;
        color: white;
        border-radius: 8rpx;
      }
    }
    .bottom {
      padding: 30rpx 0;
      display: flex;
      .left {
        margin: 0 50rpx;
        image {
          width: 150rpx;
          height: 150rpx;
        }
      }
      .right {
        view {
          &:nth-child(1) {
            font-size: 28rpx;
          }
          &:nth-child(2) {
            font-size: 28rpx;
            margin: 10rpx 0;
          }
          &:nth-child(3) {
            font-size: 26rpx;
          }
        }
      }
    }
  }
  .add-repair {
    color: white;
    background: $uv-primary;
    padding: 12rpx 24rpx;
    border-radius: 40rpx;
    font-size: 26rpx;
    position: fixed;
    bottom: 100rpx;
    right: 50rpx;
  }

  .popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.2);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;

    .popup-container {
      box-sizing: border-box;
      background: white;
      width: 80%;
      height: 70%;
      padding: 50rpx 40rpx;
      border-radius: 8rpx;

      .popup-title {
        text-align: center;
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 20rpx;
      }
      .no-data {
        height: 100%;
        max-height: 600rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .popup-wrap {
        height: calc(100% - 25px);
        // max-height: 600rpx;
        overflow-y: scroll;

        .popup-item {
          text-align: center;
          padding: 20rpx;
          border: 2rpx solid #f1f1f1;
          font-weight: 400;
          font-size: 30rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }
}
</style>
